<template>
    <section class="QuestionFirstList-box">
        <app-header></app-header>

        <div class="main-content">
            <div class="container">
                <a-breadcrumb>
                    <a-breadcrumb-item><router-link to="/" title="首页" alt="首页">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>百科-常见问题</a-breadcrumb-item>
                </a-breadcrumb>
                <a-row :gutter="48">
                    <a-col :xs="24" :sm="44" :md="16" :lg="16" :xl="16" class="left-box">
                        <a-row class="clearfix recommend-news-five-banner-box">
                            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="left-one-big-img-box">
                                <figure>
                                    <div class="inside">
                                        <a :href="oneBigImg.url" target="_blank" :title="oneBigImg.description" :alt="oneBigImg.description">
                                            <img v-lazy="oneBigImg.photo" :title="oneBigImg.description" :alt="oneBigImg.description"/>
                                            <p class="webkit-text-overflow-1lines">{{ isNull0(oneBigImg.description) }}</p>
                                        </a>
                                    </div>
                                </figure>
                            </a-col>
                            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="right-four-small-img-box">
                                <a-row>
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="right-four-small-img-li" v-for="(item, index) in fourSmallImgItem" :key="index">
                                        <div class="inside">
                                            <a :href="item.url" target="_blank" :title="item.description" :alt="item.description">
                                                <img v-lazy="item.photo" :title="item.description" :alt="item.description"/>
                                                <p class="webkit-text-overflow-1lines">{{ isNull0(item.description) }}</p>
                                            </a>
                                        </div>
                                    </a-col>
                                </a-row>
                            </a-col>
                        </a-row>
                        <!--百科列表的主体内容-->
                        <div class="question-list-box">
                            <a-tabs @change="questionTypeIdChange">
                                <a-tab-pane v-for="(item, index) in aTabPane" :key="item.key" :tab="item.tab">
                                    <ul v-show="!noDataShow">
                                        <li class="clearfix"  v-for="(item, index) in questionListItem" :key="index">
                                            <a-card :title="null" hoverable :loading="questionListLoading">
                                                <a-row :gutter="16">
                                                    <article v-if="item.photo">
                                                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="question-list-box-left">
                                                            <router-link :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" :title="item.title" :alt="item.title">
                                                                <img v-lazy="item.photo" :title="item.title" :alt="item.title" width="100%"/>
                                                            </router-link>
                                                        </a-col>
                                                        <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="question-list-box-right">
                                                            <router-link :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" :title="item.title" :alt="item.title" class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</router-link>
                                                            <aside class="webkit-text-overflow-3lines">{{ isNull0(item.description) }}</aside>
                                                            <p class="clearfix">
                                                                <a-tooltip placement="top" title="发布时间" class="left">
                                                                    <i class="iconfont icon-fabushijian"></i>  {{ momentFormat(item.createTime, 'YYYY-MM-DD') }}
                                                                </a-tooltip>
                                                                <a-tooltip placement="top" title="查看次数" class="right">
                                                                    <i class="iconfont icon-yanjing2"></i>  {{ isNull0(item.pageView) }}
                                                                </a-tooltip>
                                                            </p>
                                                        </a-col>
                                                    </article>
                                                    <article v-else>
                                                        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="question-list-box-right">
                                                            <router-link :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" :title="item.title" :alt="item.title" class="webkit-text-overflow-1lines">{{isNull0(item.title) }}</router-link>
                                                            <aside class="webkit-text-overflow-3lines">{{isNull0(item.description)}}</aside>
                                                            <p class="clearfix">
                                                                <a-tooltip placement="top" title="发布时间" class="left">
                                                                    <i class="iconfont icon-fabushijian"></i>  {{momentFormat(item.createTime, 'YYYY-MM-DD')}}
                                                                </a-tooltip>
                                                                <a-tooltip placement="top" title="查看次数" class="right">
                                                                    <i class="iconfont icon-yanjing2"></i>  {{isNull0(item.pageView)}}
                                                                </a-tooltip>
                                                            </p>
                                                        </a-col>
                                                    </article>
                                                </a-row>
                                            </a-card>
                                        </li>
                                    </ul>
                                    <div class="Pagination" style="text-align: center; margin: 30px 0 0 0;" v-show="!noDataShow">
                                        <a-pagination
                                                :showTotal="total => `共 ${total} 条`"
                                                showQuickJumper
                                                showSizeChanger
                                                :current="pageNumber"
                                                :pageSize="pageSize"
                                                :total="total"
                                                @change="pageNumberChange"
                                                @showSizeChange="pageSizeChange"/>
                                    </div>
                                    <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
                                </a-tab-pane>
                            </a-tabs>
                        </div>
                    </a-col>
                    <!--公共页面主体的右侧内容-->
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="article">
                        <rightList :msgType="5"></rightList>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import rightList from '../../components/rightList.vue';//公共组件——页面主体的右侧内容
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                questionTypeId: '10',
                oneBigImg: {},  // 广告——新闻类型——五张静态banner图——左侧1张大图
                fourSmallImgItem: [],   // 广告——新闻类型——五张静态banner图——右侧4张小图

                //百科常见问题类型tab切换数据
                aTabPane: [
                    {
                        tab: '房产问题',
                        key: '10',
                    },
                    {
                        tab: '法律问题',
                        key: '11',
                    },
                    {
                        tab: '贷款问题',
                        key: '12',
                    },
                    {
                        tab: '移民问题',
                        key: '13',
                    },
                    {
                        tab: '留学问题',
                        key: '14',
                    },
                    {
                        tab: '其他问题',
                        key: '15',
                    }
                ],

                questionListItem: [], // 百科常见问题列表数据
                pageNumber: 1,  //默认显示第一页
                pageSize: 10,   //默认每页显示10条
                total: 0,    //总条数
                questionListLoading: true,//列表加载loading
                noDataShow: false,//没有数据提示信息是否显示

            }
        },
        metaInfo () {
            return {
                title: '百科-常见问题_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '美国房产问题，美国房子问题，美国房产税务问题' },
                    { vmid: 'description', name: 'description', content: '美国房产问题，美国房子问题，美国房产税务问题' },

                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            this.getAdvertisingFiveBannerImg(); // 获取广告——新闻类型——五张静态banner图数据
            this.getQuestionListData();     //获取百科常见问题列表数据
        },
        methods: {
            // 获取广告——新闻类型——五张静态banner图数据
            getAdvertisingFiveBannerImg() {
                this.$get('/a/5').then(res => {
                    let picData = [];
                    if (res.status == 0) {
                        //过滤掉null的图片
                        picData = res.data.list.filter(item => {
                            return item.photo != null && item.photo != ''
                        });
                        this.oneBigImg = picData[0];
                        this.fourSmallImgItem = picData.splice(1, 4);
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //处理currentPage当前页变动的事件
            pageNumberChange(page, pageSize) {
                this.pageNumber = page;
                this.questionListLoading = true;
                this.getQuestionListData();
            },
            //处理pagesize页码大小变动的事件
            pageSizeChange(current, size) {
                this.pageNumber = 1;
                this.pageSize = size;
                this.questionListLoading = true;
                this.getQuestionListData();
            },
            //获取百科常见问题列表数据
            getQuestionListData() {
                this.$get(`/news/list/${this.questionTypeId}/${this.pageNumber}/${this.pageSize}`).then(res => {
                    this.questionListLoading = false;
                    if (res.status === 0) {
                        this.questionListItem = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }
                })
            },
            // 近期往期展会活动列表tab切换change事件
            questionTypeIdChange (key) {
                this.questionTypeId = key;
                this.pageNumber = 1;
                this.pageSize = 10;
                this.questionListLoading = true;
                this.getQuestionListData();
            },
        },
        components: {
            'app-header': Header,//公共组件——头部
            rightList,//公共组件——页面主体的右侧内容
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .QuestionFirstList-box {
            .main-content {
                padding: 30px 0;
                > .container {
                    > .ant-row {
                        padding: 40px 0 0 0;
                        > .left-box {
                            padding: 0;
                            position: relative;
                            /*banner广告图*/
                            > .recommend-news-five-banner-box {
                                /*左侧1张大图*/
                                > .left-one-big-img-box {
                                    > figure {
                                        padding: 0;
                                        > .inside {
                                            -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            > a {
                                                display: block;
                                                width: 100%;
                                                height: 100%;
                                                position: relative;
                                                overflow: hidden;
                                                background: #000;
                                                > img {
                                                    width: 100%;
                                                    height: 320px;
                                                    -webkit-transition: all linear 1s;
                                                    -moz-transition: all linear 1s;
                                                    transition: all linear 1s;
                                                }
                                                > p {
                                                    width: 100%;
                                                    position: absolute;
                                                    bottom: 0;
                                                    background: rgba(0, 0, 0, .4);
                                                    font-size: 14px;
                                                    color: #fff;
                                                    padding: 4px;
                                                    margin-bottom: 0px;
                                                }
                                            }
                                            > a:hover {
                                                > img {
                                                    -webkit-transform: scale(1.1, 1.1);
                                                    -moz-transform: scale(1.1, 1.1);
                                                    transform: scale(1.1, 1.1);
                                                }
                                            }
                                        }
                                    }
                                }
                                /*右侧4张小图*/
                                > .right-four-small-img-box {
                                    .right-four-small-img-li {
                                        padding: 0;
                                        > .inside {
                                            -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            > a {
                                                display: block;
                                                width: 100%;
                                                height: 100%;
                                                position: relative;
                                                overflow: hidden;
                                                background: #000;
                                                > img {
                                                    width: 100%;
                                                    height: 160px;
                                                    -webkit-transition: all linear 1s;
                                                    -moz-transition: all linear 1s;
                                                    transition: all linear 1s;
                                                }
                                                > p {
                                                    width: 100%;
                                                    position: absolute;
                                                    bottom: 0;
                                                    background: rgba(0, 0, 0, .4);
                                                    font-size: 14px;
                                                    color: #fff;
                                                    padding: 4px;
                                                    margin-bottom: 0px;
                                                }
                                            }
                                            > a:hover {
                                                > img {
                                                    -webkit-transform: scale(1.1, 1.1);
                                                    -moz-transform: scale(1.1, 1.1);
                                                    transform: scale(1.1, 1.1);
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            /*百科列表的主体内容*/
                            > .question-list-box {
                                margin: 20px 0 0 0;
                                > .ant-tabs {
                                    overflow: initial;
                                    .ant-tabs-bar {
                                        padding: 10px 20px;
                                    }
                                    > .ant-tabs-content {
                                        > .ant-tabs-tabpane {
                                            > ul {
                                                > li {
                                                    padding: 30px 10px;
                                                    border-bottom: 1px solid #E6E6E6;
                                                    -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    .ant-card {
                                                        border: none;
                                                        background: #f7f9fa;
                                                        > .ant-card-body {
                                                            padding: 0;
                                                            > .ant-row {
                                                                >article {
                                                                    > .question-list-box-left {
                                                                        > a {
                                                                            text-align: center;
                                                                            padding-right: 15px;
                                                                            > img {
                                                                                width: 100%;
                                                                                height: 160px;
                                                                                cursor: pointer;
                                                                            }
                                                                        }
                                                                    }
                                                                    > .question-list-box-right {
                                                                        text-align: justify;
                                                                        > a {
                                                                            display: block;
                                                                            font-size: 18px;
                                                                            font-weight: bold;
                                                                            color: #38485a;
                                                                            /*margin: 5px 0;*/
                                                                            cursor: pointer;
                                                                            -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                            -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                            -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                            -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                        }
                                                                        > a:hover {
                                                                            color: #00b8ee;
                                                                        }
                                                                        > p,
                                                                        > aside {
                                                                            font-size: 16px;
                                                                            margin: 10px 0;
                                                                        }
                                                                        > p {
                                                                            color: #999;
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                    .ant-card-hoverable:hover {
                                                        box-shadow: none;
                                                    }
                                                }
                                                > li:hover {
                                                    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
                                                    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
                                                    -webkit-transform: translate3d(0, 0px, -2px);
                                                    transform: translate3d(0, 1px, -2px);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
